<template>

	<PageLayout title="火情详情">
		<view style="display: flex;flex-direction: column;height: 100%;width: 100%;">
			<map id="myMap" :latitude="Gcj02GPS[1]" :longitude="Gcj02GPS[0]"
				:markers="markers" :scale="19" style="width: 100%;height: 50%">
			</map>

						<scroll-view scroll-x style="height: 50%; white-space: nowrap;">
				<image :src="images[0]" mode="heightFix" style="height: 100%;"></image>
				<image :src="images[1]" mode="heightFix" style="height: 100%;"></image>
				<image :src="images[2]" mode="heightFix" style="height: 100%;"></image>
				<image :src="images[3]" mode="heightFix" style="height: 100%;"></image>
				<image :src="images[4]" mode="heightFix" style="height: 100%;"></image>
			</scroll-view>


			<view
				style="margin: 6px;padding: 6px;;display: flex;border-radius: 20px;background-color: #ffffff;align-items: center;border: 1px #eaeaea solid;width: calc(100% - 24px);">
				<picker mode="selector" :range="fireLevelList" @change="handlecurrentSelectDroneIdChange"
					style="display: flex;justify-content: center;align-items: center;width: 100%;">
					<view>{{chineseFireLevel}}</view>
				</picker>
			</view>
			<view
				style="margin-bottom: 6px ;margin-left: 6px ;margin-right: 6px ;display: flex;  flex-direction: row; justify-content: start;flex-wrap: wrap;font-size: 14px;background-color: #ffffff;border-radius: 10px;border:1px solid #eaeaea">
				<view
					style="width: 100%;display: flex;justify-content: start;padding-bottom: 6px;padding-top: 6px;padding-left: 6px;">
					<image src="/static/icons/fire.png" mode="aspectFill"
						style="width: 20px;height: 20px;margin-right: 2px;"></image>
					<text style="width: 68px;text-align: start;margin-left: 2px;">火情id</text>
					<text>{{fireDescription.fireId}}</text>

				</view>
				<view style="width: 100%;display: flex;justify-content: start;padding-bottom: 6px;padding-left: 6px;">
					<image src="/static/icons/route_black.png" mode="aspectFill"
						style="width: 20px;height: 20px;margin-right: 2px;"></image>
					<text style="width: 68px;text-align: start;margin-left: 2px;">路线名</text>
					<text>{{fireDescription.routeName}}</text>

				</view>
				<view style="width: 100%;display: flex;justify-content: start;padding-bottom: 6px;padding-left: 6px;">
					<image src="/static/icons/record_red.png" mode="aspectFill"
						style="width: 20px;height: 20px;margin-right: 2px;"></image>
					<text style="width: 68px;text-align: start;margin-left: 2px;">记录时间</text>
					<text>{{formatDateTime(fireDescription.recordTime)}}</text>

				</view>
				<view style="width: 100%;display: flex;justify-content: start;padding-bottom: 6px;padding-left: 6px;">
					<image src="/static/icons/drone_black.png" mode="aspectFill"
						style="width: 20px;height: 20px;margin-right: 2px;"></image>
					<text style="width: 68px;text-align: start;margin-left: 2px;">无人机id</text>
					<text>{{fireDescription.droneId}}</text>

				</view>
			</view>
		</view>

	</PageLayout>
</template>

<script setup>
	import PageLayout from "/pages/PageLayout/PageLayout.vue";
	import {
		ref,
		reactive,
		onMounted,
		onUnmounted
	} from "vue";
	import {
		handleFire
	} from "/utils/HttpUtils";
	import {
		wgs84ToGcj02
	} from "/utils/Utils";
	const fireDescription = ref(getApp().globalData.fire_video_info);
	const markers = ref([]);
	const fireLevelList = ref(["待查看", "误判", "微小火焰", "立即处理", "隔离上报"]);
	const fireLevelListEng = ref(["unprocessed", "misjudgment", "insignificant", "security_required", "leader_approval"]);
	const translateFireLevel = (engFireLevel) => {
		switch (engFireLevel) {
			case ("unprocessed"):
				return "待查看";
			case ("misjudgment"):
				return "误判";
			case ("insignificant"):
				return "微小火焰";
			case ("security_required"):
				return "立即处理";
			case ("leader_approval"):
				return "隔离上报";
		}
	}
	const handlecurrentSelectDroneIdChange = async (e) => {
		const selectFireLevelListEng = fireLevelListEng.value[e.detail.value];
		if (handleFire(fireDescription.value.fireId, selectFireLevelListEng, getApp().globalData.person_info
				.personPhoneNumber)) {
			getApp().globalData.fire_video_info.fireLevel = selectFireLevelListEng;
			fireDescription.value.fireLevel = selectFireLevelListEng;
			chineseFireLevel.value = translateFireLevel(selectFireLevelListEng);
		}

	};

	const formatDateTime = (dateString) => {
		const date = new Date(dateString);

		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const day = String(date.getDate()).padStart(2, '0');
		const hours = String(date.getHours()).padStart(2, '0');
		const minutes = String(date.getMinutes()).padStart(2, '0');
		const seconds = String(date.getSeconds()).padStart(2, '0');

		return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	};
	// const timer = ref(null);
	const chineseFireLevel = ref("");
	const images = ref([]);
	const Gcj02GPS=ref();
	onMounted(() => {
		Gcj02GPS.value = wgs84ToGcj02(fireDescription.value.longitude, fireDescription.value.latitude);
		const newMarker = {
			id: markers.value.length + 1,
			latitude: Gcj02GPS.value[1],
			longitude: Gcj02GPS.value[0],
			iconPath: '/static/icons/fire_red.png',
			title: "火情坐标",
			width: 15,
			height: 15
		};
		markers.value.push(newMarker);
		chineseFireLevel.value = translateFireLevel(fireDescription.value.fireLevel);
		// images.value=useSplitUrls(fireDescription.value.videoPath);
		images.value = fireDescription.value.videoPath.split(',');
		for (let i = 0; i < images.value.length; i++) {
			console.log(images.value[i]);
		}
		// timer.value = setInterval(async () => {
		// 	fireDescription.value=getApp().globalData.fire_video_info;
		// 	// console.log(routes.value);
		// }, 1000);

	});
	// onUnmounted(() => {
	// 	if (timer.value) clearInterval(timer.value);
	// });
</script>

<style lang="scss" scoped>

</style>